<form class="form-search" data-bind="submit: performSearch, visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_LIST)">
    <div class="search-query-with-clear" data-bind="css: {'active-clear': searchQuery}">
        <input type="search" class="input-block search-query" data-bind="value: searchQuery, valueUpdate: 'input'" placeholder="{{ _('Search...')|edq }}" spellcheck="false">
        <span class="search-clear" data-bind="click: clearSearchQuery"><i class="fas fa-times"></i></span>
    </div>
</form>
<div class="gcode_files" data-test-id="files-list" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_LIST)">
    <div class="entry back clickable" data-bind="visible: currentPath() != '', click: function() { $root.navigateUp(); }" style="display: none">
        <div class="back-arrow"><i class="fas fa-arrow-left"></i> {{  _('Back') }}</div>
        <div class="back-path"><small class="muted">{{ _('Currently in') }} <span data-bind="text: currentPath"></span></small></div>
    </div>

    <div class="scroll-wrapper" data-bind="foreach: filesAndFolders">
        <div class="entry" data-bind="attr: { id: $root.getEntryId($data) }, template: { name: $root.templateFor($data), data: $data }, css: $data.type"></div>
    </div>

    <script type="text/html" id="files_template_machinecode">
        <div class="btn btn-mini toggleAdditionalData pull-right" data-bind="visible: origin != 'sdcard',click: function() { if ($root.enableAdditionalData($data)) { $root.toggleAdditionalData($data); } else { return; } }, css: { disabled: !$root.enableAdditionalData($data) }" title="{{ _('Additional data')|edq }}"><i class="fas fa-chevron-down"></i></div>
        <div class="btn btn-mini pull-right disabled" data-bind="visible: origin == 'sdcard'" title="{{ _('On SD Card')|edq }}"><i class="fas fa-sd-card"></i></div>
        <div role="heading" aria-level="3" class="title clickable" data-bind="click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, false); } else { return; } }, css: $root.getSuccessClass($data), style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }, text: display"></div>
        <div class="internal" data-bind="visible: display && name != display && $root.showInternalFilename">{{ _('Internal') }}: <span data-bind="text: name"></span></div>
        <div class="uploaded">{{ _('Updated') }}: <span data-bind="text: formatTimeAgo(date, '?'), attr: {title: formatDate(date, {placeholder:'{{ _('unknown')|esq }}'})}"></span></div>
        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
        <div class="additionalInfo hide" data-bind="html: $root.getAdditionalData($data)"></div>
        <div class="btn-group action-buttons">
            <a class="btn btn-mini btn-files-download" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DOWNLOAD), attr: {href: $root.downloadLink($data)}, css: {disabled: !$root.downloadLink($data)}" title="{{ _('Download')|edq }}" aria-label="{{ _('Download')|edq }}"><i class="fas fa-download"></i></a>
            <div class="btn btn-mini btn-files-move" data-bind="visible: $root.loginState.hasAllPermissionsKo($root.access.permissions.FILES_UPLOAD, $root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableMove($data)) { $root.showMoveDialog($data, event); } else { return; } }, css: {disabled: !$root.enableMove($data)}" title="{{ _('Move or Rename')|edq }}" aria-label="{{ _('Move or Rename')|edq }}" role="link"><i class="fas fa-cut"></i></div>
            <div class="btn btn-mini btn-files-delete" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableRemove($data)) { $root.removeFile($data, event); } else { return; } }, css: {disabled: !$root.enableRemove($data)}" title="{{ _('Remove')|edq }}" aria-label="{{ _('Remove')|edq }}" role="link"><i class="far fa-trash-alt"></i></div>
            <div class="btn btn-mini btn-files-select" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_SELECT), click: function() { if ($root.enableSelect($data)) { $root.loadFile($data, false); } else { return; } }, css: {disabled: !$root.enableSelect($data)}" title="{{ _('Load')|edq }}" aria-label="{{ _('Load')|edq }}" role="link"><i class="fas fa-folder-open"></i></div>
            <div class="btn btn-mini btn-files-print" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.PRINT), click: function() { if ($root.enableSelectAndPrint($data)) { $root.loadFile($data, true); } else { return; } }, css: {disabled: !$root.enableSelectAndPrint($data)}" title="{{ _('Load and Print')|edq }}" aria-label="{{ _('Load and Print')|edq }}" role="link"><i class="fas fa-print"></i></div>
        </div>
    </script>

    <script type="text/html" id="files_template_model">
        <div class="title muted" data-bind="text: display"></div>
        <div class="internal" data-bind="visible: name != display">{{ _('Internal') }}: <span data-bind="text: name"></span></div>
        <div class="uploaded">{{ _('Updated') }}: <span data-bind="text: formatTimeAgo(date, '?'), attr: {title: formatDate(date, {placeholder:'{{ _('unknown')|esq }}'})}"></span></div>
        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
        <div class="btn-group action-buttons">
            <a class="btn btn-mini btn-files-download" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DOWNLOAD), attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}" title="{{ _('Download')|edq }}" aria-label="{{ _('Download')|edq }}" role="link"><i class="fas fa-download"></i></a>
            <div class="btn btn-mini btn-files-move" data-bind="visible: $root.loginState.hasAllPermissionsKo($root.access.permissions.FILES_UPLOAD, $root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableMove($data)) { $root.showMoveDialog($data, event); } else { return; } }, css: {disabled: !$root.enableMove($data)}" title="{{ _('Move')|edq }}" aria-label="{{ _('Move')|edq }}" role="link"><i class="fas fa-cut"></i></div>
            <div class="btn btn-mini btn-files-delete" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableRemove($data)) { $root.removeFile($data, event); } else { return; } }, css: {disabled: !$root.enableRemove($data)}" title="{{ _('Remove')|edq }}" aria-label="{{ _('Remove')|edq }}" role="link"><i class="far fa-trash-alt"></i></div>
            <div class="btn btn-mini btn-files-slice"  data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.SLICE), click: function() { if ($root.enableSlicing($data)) { $root.sliceFile($data); } else { return; } }, css: {disabled: !$root.enableSlicing($data)}" title="{{ _('Slice')|edq }}" aria-label="{{ _('Slice')|edq }}" role="link"><i class="fas fa-magic"></i></div>
        </div>
    </script>

    <script type="text/html" id="files_template_folder">
        <div class="btn btn-mini toggleAdditionalData pull-right" data-bind="visible: origin != 'sdcard',click: function() { if ($root.enableAdditionalData($data)) { $root.toggleAdditionalData($data); } else { return; } }, css: { disabled: !$root.enableAdditionalData($data) }" title="{{ _('Additional data')|edq }}"><i class="fas fa-chevron-down"></i></div>
        <div class="title clickable" data-bind="click: $root.changeFolder, style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }"><i class="fas fa-folder-open"></i> <span data-bind="text: display"></span></div>
        <div class="internal" data-bind="visible: name != display">{{ _('Internal') }}: <span data-bind="text: name"></span></div>
        <div class="uploaded">{{ _('Updated') }}: <span data-bind="text: formatTimeAgo(date, '?'), attr: {title: formatDate(date, {placeholder:'{{ _('unknown')|esq }}'})}"></span></div>
        <div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
        <div class="additionalInfo hide" data-bind="html: $root.getAdditionalData($data)"></div>
        <div class="btn-group action-buttons">
            <div class="btn btn-mini btn-files-move" data-bind="visible: $root.loginState.hasAllPermissionsKo($root.access.permissions.FILES_UPLOAD, $root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableMove($data)) { $root.showMoveDialog($data, event); } else { return; } }, css: {disabled: !$root.enableMove($data)}" title="{{ _('Move')|edq }}" aria-label="{{ _('Move')|edq }}" role="link"><i class="fas fa-cut"></i></div>
            <div class="btn btn-mini btn-files-delete" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_DELETE), click: function(data, event) { if ($root.enableRemove($data)) { $root.removeFolder($data, event); } else { return; } }, css: {disabled: !$root.enableRemove($data)}" title="{{ _('Remove')|edq }}" aria-label="{{ _('Remove')|edq }}" role="link"><i class="far fa-trash-alt"></i></div>
        </div>
    </script>
</div>
<div class="text-right muted" data-bind="attr: {title: diskusageString}, css: {'text-error': diskusageCritical}, style: {'font-weight': diskusageCritical() || diskusageWarning() ? 'bold' : 'normal'}, visible: $root.loginState.hasPermissionKo($root.access.permissions.FILES_LIST)">
    <small>{{ _('Free') }}: <span data-bind="text: freeSpaceString"></span> / {{ _('Total') }}: <span data-bind="text: totalSpaceString"></span> <i class="fas fa-exclamation-triangle" data-bind="visible: diskusageWarning" style="display: none"></i></small>
</div>
<div style="display: none;" data-bind="visible: loginState.hasPermissionKo(access.permissions.FILES_UPLOAD)">
    <div class="row-fluid folder-button">
        <span class="btn addfolder-button span12" data-bind="click: $root.showAddFolderDialog">
            <i class="fas fa-folder"></i> {{ _('Create folder...') }}
        </span>
    </div>
    <div class="row-fluid upload-buttons">
        <span class="btn btn-primary fileinput-button span{% if enableSdSupport %}6{% else %}12{% endif %}" style="margin-bottom: 10px">
            <i class="fas fa-upload"></i>
            <span>{{ _('Upload') }}</span>
            <input id="gcode_upload" data-test-id="upload-local" accept="{{ ",".join(supportedExtensions) }}" type="file" name="file" class="fileinput-button" multiple>
        </span>
        {% if enableSdSupport %}
            <span class="btn btn-primary fileinput-button span6" data-bind="enable: $root.isSdReady() && !$root.isPrinting(), css: {disabled: !$root.isSdReady() || $root.isPrinting()}" style="margin-bottom: 10px">
                <i class="fas fa-upload"></i>
                <span>{{ _('Upload to SD') }}</span>
                <input id="gcode_upload_sd" data-test-id="upload-sd" accept="{{ ",".join(supportedExtensions) }}" type="file" name="file" class="fileinput-button" data-bind="enable: isSdReady()">
            </span>
        {% endif %}
    </div>
    <div id="gcode_upload_progress" class="progress progress-text-centered">
        <div class="bar"></div>
        <span class="progress-text-back" data-bind="css: { 'progress-text-front': (uploadProgressPercentage() >= 50), 'progress-text-back': (uploadProgressPercentage() < 50) }, text: uploadProgressText()"></span>
    </div>
    <div>
        <small class="muted">{{ _('Hint: You can also drag and drop files on this page to upload them.') }}</small>
    </div>
</div>
